<template>
  <mask-layer :show="props.show">
    <div class="select" anim="up">
      <div class="title" flex="main:justify">
        <!-- <span @click="$emit('hide')">取消</span>{{props.title}}<span @click="confirm">确定</span> -->
        <span @click="hide">取消</span>{{props.title}}<span @click="confirm">确定</span>
      </div>
      <ul>
        <li :class="{on:props.index==index}" v-for="(item, index) in props.list" :key="index" flex="main:justify" @click="onClick(index)">
          <template v-if="props.value!=undefined">
            {{item}}
          </template>
          <template v-else>
            {{item.text}}
          </template>
          <span flex="main:center cross:center"></span>
        </li>
      </ul>
    </div>
  </mask-layer>
</template>

<script>
  import MaskLayer from '@/components/MaskLayer'

  export default {
    name: 'list-select',
    data(){
      return{
        
      }
    },
    props: {
      props:{
        type:Object,
        default:()=>{
          return {
            show:false,
            index:0,
            list:[],
            value:'合肥'
          }
        }
      }
    },
    components:{
      MaskLayer
    },
    methods:{
      onClick(i){
        this.props.index=i
      },
      confirm(v){
        if(this.props.value==undefined){
          location.href=this.props.list[this.props.index].link
        }else{
          this.props.value=this.props.list[this.props.index]
        }
        this.hide()
        // this.$emit('getValue',this.props.list[this.props.index])
      },
      hide(){
        this.props.show=false
      }
    },
    mounted(){
      
    }
  }
</script>

<style lang="less" scoped>
  .select{
    background: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 15px;
    color: #999;
    .title{
      padding: 10px 4%;
      border-bottom: 6px solid #e7ecf2;
      span{
        color: #0099d9;
      }
    }
    @ml: 6%;
    @color: #ccc;
    li{
      width: 94%;
      box-sizing: border-box;
      padding: 15px 0 15px 6px;
      border-bottom: 1px solid #ddecfa;
      margin-left: @ml;
      span{
        background: #fff;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin-right: @ml;
        border: 2px solid @color;
        &:after{
          content: "";
          width: 10px;
          height: 10px;
          background: @color;
          border-radius: 50%;
        }
      }
      &.on{
        @color: #0099d9;
        span{
          border: 2px solid @color;
          &:after{
            background: @color;
          }
        }
      }
    }
  }
</style>
